<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户组</title>
  <style>
    #hide{
            height:585px!important;
        }
    .layui-input-block{
      width: 263px;
    }
    </style>
  <link rel="stylesheet" href="../../css/system/system.css">
  <link rel="stylesheet" href="../../css/public/base.css">
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <script src="../../js/public/jquery-3.3.1.js"></script>
</head>

<body>
    <div class="main">
       <div class="left">
           <ul>
               <li ><i></i><a href="./manage.html">管理员</a></li>
               <li class="active"><i></i><a href="./userGroup.html">用户组</a></li>
               <!--<li><i></i><a href="./jurisdiction.html">权限管理</a></li>-->
               <!--<li><i></i><a href="./backMenu.html">后台菜单</a></li>-->
           </ul>
       </div>
       <div class="right">
            <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
               <button class="addManage"  data-type="auto">添加用户组</button>
            </div>
           <div class="layui-form rl-table">
                <table class="layui-table" ay-skin="nob" id='table2' lay-filter="table2" ></table>

           </div>
       </div>
    </div>
  </div>
  <div id="hide">
    <div class="hideContent">
      <div class="layui-form-item">
        <label class="layui-form-label">分组名称</label>
        <div class="layui-input-block">
          <input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block" style="margin-left:-186px!important;">
          <p style="margin-top:12px!important;color: #333333;">权限选择</p>
        </div>
      </div>
      <div class="permission"></div>
      <div class="layui-form-item">
        <label class="layui-form-label">显示开关</label>
        <div class="layui-input-block layui-form">
          <input type="checkbox" name="switch" lay-skin="switch" lay-text='开|关'>
        </div>
      </div>
    </div>
  </div>
  <div id="hideEdit">
      <div class="hideContent">
        <div class="layui-form-item">
          <label class="layui-form-label">分组名称</label>
          <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="layui-input-block" style="margin-left:-186px!important;">
            <p style="margin-top:12px!important;color: #333333;">权限选择</p>
          </div>
        </div>
        <div class="permissionEdit"></div>
        <div class="layui-form-item">
          <label class="layui-form-label">显示开关</label>
          <div class="layui-input-block layui-form">
            <input type="checkbox" name="switch" lay-skin="switch" lay-text='开|关'>
          </div>
        </div>
      </div>
    </div>
</body>
<script src="../../layui/layui.js"></script>
<script src="../../js/system/system.js"></script>
<script type="text/html" id="switch">
  <input type="checkbox" name="switch" lay-skin="switch" lay-text="开|关">
</script>
<script type="text/html" id="barDemo">
  <a href="#" class="edit" lay-event="edit">编辑</a>
  <a href="#" class="del" lay-event="del">删除</a>
</script>
<script>
  $(document).ready(function () {
    var str="",arr=[2,3,4,5,6,7,8,9,10];
    for(var i=0;i<9;i++){
      var str1="";
      for(var j=0;j<arr[i];j++){
        str1=str1+'<input type="checkbox" lay-skin="primary" title="'+j+'" class="aa'+j+'">';
      }
      str=str+'<div class="layui-form-item">\n' +
        '        <label class="layui-form-label option"><input type="checkbox" lay-skin="primary">菜单</label>\n' +
        '        <div class="layui-input-block purview layui-form">'+str1+'</div>\n' +
        '      </div>'
    }
    $(".permission").html(str);
    $(".permissionEdit").html(str);
    $(".aa0").attr("checked",true);
  });
  //组件
  layui.use('table', function () {
    var table = layui.table;
    table.render({
      elem: '#table2'
    ,page: true //开启分页
    ,cols: [[ //表头
      {type: 'checkbox',width:80,unresize: true}
      ,{field: 'id', title: 'ID', width:80,unresize: true}
      ,{field: 'groupName', title: '组名称', width:150,unresize: true}
      ,{field: 'groupMember', title: '组成员', width:143,unresize: true}
      ,{field: 'status', title: '状态', width:150,unresize: true,toolbar: '#switch'}
      ,{field: 'jurisdiction', title: '权限', width: 450,unresize: true}
      ,{field: 'options', title: '操作', width: 130,toolbar: '#barDemo',unresize: true,fixed:'right'}
    ]],
    data:[{
      "id": "01"
        , "groupName": '超级管理员'
        , "groupMember": '成员01'
        , "jurisdiction": '官网；商品；订单；会员；客户；公告；资产；管理；系统'
    }]
    })
      //表格操作弹窗
table.on('tool(table2)', function (obj){
    var data = obj.data;
    if (obj.event === 'del'){
        layer.open({
                        type: 1,
                        title: '信息',
                        closeBtn: 1,
                        area: ['300px', '200px'],
                        shade: 0,
                        id: 'delSure', //设定一个id，防止重复弹出
                        btn: ['确认','取消'],
                        btnAlign: 'r',
                        content:'确认删除行吗？',
                    });
    }else if (obj.event === 'edit'){
    layer.open({
      type: 1,
      title: '新增用户组',
      closeBtn: 1,
      area: '710px;',
      shade: 0,
      id: 'LAY_layuipro', //设定一个id，防止重复弹出
      btn: ['提交','重置'],
      btnAlign: 'c',
      moveType: 1, //拖拽模式，0或者1
      content:$('#hideEdit'),
      success: function (layero) {
        // var btn = layero.find('.layui-layer-btn');
        // btn.find('.layui-layer-btn0').attr({
        //     href: '#',
        //     target: '_blank'
        // });
      }
    });
  }
  })
  });
  layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage
    $ = layui.jquery, //弹框
      layer = layui.layer;
    laypage.render({
      elem: 'demo3'
      , prev: '<em><</em>'
      , next: '<em>></em>'
      , count: 100
      , layout: ['limit', 'skip', 'prev', 'page', 'next']
      , jump: function (obj) {
        console.log(obj)
      }
    });
  })
  //弹窗
  $('.addManage').click(function () {

        layer.open({
                        type: 1,
                        title: '新增用户组',
                        closeBtn: 1,
                        area: '710px;',
                        shade: 0,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['提交','重置'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content:$('#hide'),
                        success: function (layero) {
                            // var btn = layero.find('.layui-layer-btn');
                            // btn.find('.layui-layer-btn0').attr({
                            //     href: '#',
                            //     target: '_blank'
                            // });
                        }
                    });
    })
            $('#layerDemo .layui-btn').on('click', function () {
                var othis = $(this),
                    method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
</script>

</html>